<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: margins around float and non-float content</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<meta name="flags" content="ahem">
		<meta name="assert" content="Test checks that margins do not collapse for content flowed
				inside a region, both for float and non-float contents.">
		<link rel="match" href="reference/floats-in-named-flow-031-ref.html">
		<style>
		article {
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
		}
		
		.flow {
			flow-into: f;
		}
		
		.float {
			float: left;
			color: blue;
			margin: 1em 2em 3em 4em;
		}

		.outer-container {
			display: inline-block;
			border: 10px solid black;
		}

		.regions-container {
			margin: 20px 15px 10px 5px;
		}

		.content {
			margin: 2px 4px 8px 16px;
			color: green;
		}
		
		.region {
			flow-from: f;
		}

		.region > p {
			background: red;
		}
		</style>
	</head>
	<body>
		<p>
			<!-- TODO Determine what the outcome should be - currently expecting a resolution on 
			the issue on www-style/css3-break -->
			Test passes if you see two colored squares inside a black-bordered rectangle.<br>
			The first (top to bottom) square should be blue, while the second should be green.<br>
			The blue square should be roughly horizontally centered and the green square should be
			near the bottom left corner of the rectangle. Neither square should touch the black border.<br>
			You should see no red.
		</p>
		
		<div class="outer-container">
			<div class="regions-container">
				<div class="region">
					<p>&nbsp;</p>
				</div>
			</div>
		</div>

		<article class="flow">
			<div class="float">
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx
			</div>
			<div class="content">
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx<br>
				xxxxx
			</div>
		</article>
	</body>
</html>